<template>
  <div v-has="'leave-query'" class="approve-manager">
    <div class="query-form">
      <query-form
        :form="searchForm"
        v-model="leaveForm"
        @handleQuery="handleQuery"
        @handleReset="handleReset"
      />
    </div>

    <div class="base-table">
      <list-table
        :columns="columns"
        :tableList="applyList"
        :btnList="btnList"
        @userCreate="userCreate"
        @onuserEdit="onuserEdit"
        @userDel="userDel"
      />
      <!-- <div class="action">
        <el-button type="primary" @click="Add">休假申请</el-button>
      </div>

      <el-table
        ref="multipleTableRef"
        :data="applyList"
        style="width: 100%"
        row-key="_id"
        :tree-props="{ children: 'children' }"
      >
        <el-table-column
          v-for="item in columns"
          :key="item.prop"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          :formatter="item.formatter"
        ></el-table-column>

        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button @click="Edit(scope.row)">查看</el-button>
            <el-popconfirm
              confirm-button-text="Yes"
              cancel-button-text="No"
              title="Are you sure to delete?"
              @confirm="Del(scope.row)"
            >
              <template #reference>
                <el-button type="danger">作废</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table> -->

      <pagination :total="total" @handleCurrentChange="handleCurrentChange" />
    </div>

    <el-dialog v-model="showMadol" :title="title">
      <el-form ref="dialognewApplyForm" :model="newApplyForm" :rules="rules">
        <el-form-item label="休假类型" prop="type">
          <el-select
            v-model="newApplyForm.applyType"
            placeholder="请选择休假类型"
          >
            <el-option label="事假" :value="1" />
            <el-option label="调休" :value="2" />
            <el-option label="年假" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item label="休假时间" prop="time">
          <el-col :span="11">
            <el-date-picker
              type="date"
              v-model="newApplyForm.startTime"
              placeholder="选择开始日期"
              style="width: 100%"
              @change="oldfixHour"
              :disabled-date="disabledDate"
            />
          </el-col>
          <el-col class="text-center" :span="1" style="margin: 0 0.5rem"
            >-</el-col
          >
          <el-col :span="11">
            <el-date-picker
              type="date"
              v-model="newApplyForm.endTime"
              placeholder="选择结束日期"
              style="width: 100%"
              @change="fixHour"
              :disabled-date="disabledDate"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="休假时长" prop="leaveTime">
          {{ leaveTime }}
        </el-form-item>
        <el-form-item label="休假原因" prop="reasons">
          <el-input
            v-model="newApplyForm.reasons"
            :rows="2"
            type="textarea"
            placeholder="请输入休假原因"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>

    <el-dialog v-model="detailsMadol" title="申请休假详情">
      <el-steps align-center>
        <el-step
          :status="
            stepsList[
              cenetForm.applyState == 1 ? 0 : cenetForm.applyState == 5 ? 2 : 1
            ]
          "
          title="待审批"
        />
        <el-step
          :status="
            stepsList[
              cenetForm.applyState == 2
                ? 0
                : cenetForm.applyState == 1
                ? 3
                : cenetForm.applyState == 5
                ? 2
                : 1
            ]
          "
          title="审批中"
        />
        <el-step
          :status="
            stepsList[
              cenetForm.applyState == 3
                ? 2
                : cenetForm.applyState == 4
                ? 1
                : cenetForm.applyState == 5
                ? 2
                : 3
            ]
          "
          :title="
            cenetForm.applyState == 5
              ? '作废'
              : cenetForm.applyState == 4
              ? '审批通过'
              : cenetForm.applyState == 3
              ? '审批拒绝'
              : '审批通过/审批拒绝'
          "
        />
      </el-steps>
      <el-form label-width="100px" :model="cenetForm" style="max-width: 460px">
        <el-form-item label="休假类型:">
          {{ applyType[cenetForm.applyType] }}
        </el-form-item>
        <el-form-item label="休假时间:">
          {{ cenetForm.timeOff }}
        </el-form-item>
        <el-form-item label="休假时长:">
          {{ cenetForm.leaveTime }}
        </el-form-item>
        <el-form-item label="休假原因:">
          {{ cenetForm.reasons }}
        </el-form-item>
        <el-form-item label="审批状态:">
          {{ applyState[cenetForm.applyState] }}
        </el-form-item>
        <el-form-item label="审批人:">
          {{ cenetForm.curAuditUserName }}
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import api from './../api'
import utils from './../utils/utils.js'
import message from '../utils/message.js'
import { ref, reactive, toRaw, nextTick } from 'vue'
let stepsList = reactive(['process', 'success', 'error', null])
let active = ref(0)
let cenetForm = ref([])
// 显示搜索表单
const searchForm = [
  {
    type: 'select',
    label: '审批状态',
    prop: 'applyState',
    placeholder: '审批状态',
    option: [
      {
        value: '',
        label: '全部'
      },
      {
        value: 1,
        label: '待审批'
      },
      {
        value: 2,
        label: '审批中'
      },
      {
        value: 3,
        label: '审批拒绝'
      },
      {
        value: 4,
        label: '审批通过'
      },
      {
        value: 5,
        label: '作废'
      },
    ]
  },
]
// 显示按钮
let btnList = reactive({
  tbTopBtn: [
    {
      type: 'primary',
      text: '休假申请',
      id: 1,
    },
  ],
  tableBtn: [
    {
      type: '',
      text: '查看',
      id: 3,
    },
    {
      type: 'danger',
      text: '作废',
      id: 2,
    },
  ],
})
// 定义页面页码
let total = ref(10)
// 定义记录用户行为
let action = ref('create')
// 定义弹窗显示
let showMadol = ref(false)
let detailsMadol = ref(false)
// 定义弹窗标题
let title = ref('申请休假')
// 定义弹窗表单节点
const dialognewApplyForm = ref(null)
// 弹窗表单校验
let rules = reactive({
  //   type: [
  //     {
  //       required: true,
  //       message: "请填写休假类型",
  //       trigger: "blur",
  //     }
  //   ],
  //   time: [
  //     {
  //       required: true,
  //       message: "请选择休假时间",
  //       trigger: "blur",
  //     },
  //   ],
  //   leaveTime: [
  //     {
  //       required: true,
  //       trigger: "blur",
  //     },
  //   ],
  reasons: [
    {
      required: true,
      message: "请填写休假原因",
      trigger: "blur",
    },
  ],
})
// 定义请求列表
let leaveForm = reactive({
  "type": "",
  "applyState": "",
})
let pager = reactive({
  "pageNum": 1,
  "pageSize": 10
})
let newApplyForm = reactive({
  applyType: 1,
  leaveTime: '0天',
  applyState: ''
})
let applyList = ref([])

const applyState = reactive(['全部', '待审批', '审批中', '审批拒绝', '审批通过', '作废'])
const applyType = reactive(['', '事假', '调休', '年假'])
// 定义动态表格--格式
let columns = reactive([
  {
    label: '单号',
    prop: 'orderNo'
  },
  {
    label: '申请人',
    prop: 'applyUser.userName'
  },
  {
    label: '休假时间',
    prop: 'startTime',
    width: 195,
    formatter: (row, column, value) => {
      let startTime = utils.formateDate(new Date(row.startTime))
      let endTime = utils.formateDate(new Date(row.endTime))
      let timeOff = startTime.slice(0, 10) + '至' + endTime.slice(0, 10)
      return timeOff;
    }
  },
  {
    label: '休假时长',
    prop: 'leaveTime'
  },
  {
    label: '休假类型',
    prop: 'applyType',
    formatter: (row, colum, value) => {
      return applyType[value]
    }
  },
  {
    label: '休假原因',
    prop: 'reasons'
  },
  {
    label: '申请时间',
    prop: 'createTime',
    width: 165,
    formatter: (row, colum, value) => {
      return utils.formateDate(new Date(value))
    }
  },
  {
    label: '审批人',
    prop: 'auditUsers'
  },
  {
    label: '当前审批人',
    prop: 'curAuditUserName'
  },
  {
    label: '审批状态',
    prop: 'applyState',
    formatter: (row, colum, value) => {
      return applyState[value]
    }
  },
])


// 休假时间
let leaveTime = ref('0天')
let oldTime = ref(0)
const oldfixHour = (val) => {
  oldTime.value = val
}
const fixHour = (val) => {
  leaveTime.value = ((val - oldTime.value) / 86400000) + 1 + '天'
}
const disabledDate = (data) => {
  const nowDate = new Date();
  return nowDate > data
}

// 获取休假申请列表请求
const getUsersList = async () => {
  let data = { ...leaveForm, ...pager }
  let { list, page } = await api.getLeaveList(data)
  applyList.value = list
//   console.log(list);
  total.value = page.total
}
getUsersList()
// 表单重置
const resetForm = () => {
  dialognewApplyForm.value.resetFields()
}
// 休假申请
const userCreate = () => {
  showMadol.value = !showMadol.value
}
// 弹窗取消
const handleCancel = () => {
  resetForm()
  showMadol.value = !showMadol.value
}
// 弹窗确定
const handleSubmit = () => {
  dialognewApplyForm.value.validate((vaild) => {
    if (vaild) {
      let data = toRaw(newApplyForm)
      data.action = action.value
      data.applyState = 1
      data.leaveTime = leaveTime.value
      console.log(data);
      api.postLeaveOperate(data).then(res => {
        resetForm()
        message.message('提交成功!', 'success')
        showMadol.value = !showMadol.value
        getUsersList()
      })
    }
  })
}
// 查看
const onuserEdit = (row) => {
  detailsMadol.value = !detailsMadol.value
  cenetForm.value = row.row
  cenetForm.value.timeOff = row.row.startTime.slice(0, 10) + '至' + row.row.endTime.slice(0, 10)
}
// 作废
const userDel = (row) => {
  if (row.applyState == 5) {
    message.message('该状态已作废!', 'warning')
  } else {
    action.value = 'edit'
    newApplyForm = toRaw(row)
    newApplyForm.action = action.value
    newApplyForm.applyState = 5
    api.postLeaveOperate(newApplyForm).then(res => {
      message.message('提交成功!', 'success')
      getUsersList()
    })
  }
}
// 查询
const handleQuery = (val) => {
  let data = {
    applyState: val.value.applyState
  }
  api.getLeaveList(data).then(res => {
    applyList.value = res.list
    total.value = res.page.total
    message.message('查询成功!', 'success')
  })
}
// 重置
const handleReset = () => {
  getUsersList()
  message.message('重置成功!', 'success')
}
// 页面切换
const handleCurrentChange = async (val) => {
  let data = { ...leaveForm, ...pager }
  data.pageNum = val
  let { list, page } = await api.getLeaveList(data)
  applyList.value = list
}
</script>

<style lang="scss" scoped>
.approve-manager {
  .query-form {
    border-radius: 5px;
    background-color: #fff;
    padding: 20px;
    .el-form-item {
      margin-bottom: 0;
    }
  }
  .base-table {
    margin-top: 20px;
    border-radius: 5px;
    .action {
      padding: 20px;
      background-color: #fff;
      border-bottom: 1px solid #eef0f3;
    }
    .page {
      margin: 10px auto;
      float: right;
    }
  }
}
</style>